<template>
	<view class="page">
		<cu-custom :isBack="true" class="bg-blue">
			<block slot="backText">返回</block>
			<block slot="content">添加隐患</block>
		</cu-custom>
		<view class="" style="height: 0;flex-grow: 1; overflow: auto;">
			<view class="cu-form-group margin-top">
				<textarea style="min-height: 150px;" auto-height="false" maxlength="-1" v-model="danger.contentDesc" placeholder="请填写隐患描述"></textarea>
			</view>

			<view class="cu-bar bg-white margin-top">
				<view class="action">
					图片/视频上传
				</view>
				<view class="action">
					{{danger.attachmentLocalList.length}}/9
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in danger.attachmentLocalList" :key="index" @tap="clickPreviewImage"
					 :data-index="index">
						<image :src="item.path" mode="aspectFill" v-if="item.type=='jpg'"></image>
						<image src="../../static/patrol/patrol_mobile_device_default_video.png" mode="aspectFill" v-if="item.type=='mp4'"></image>
						<view class="cu-tag bg-red" @tap.stop="clickDeleteImage" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="clickChooseImage" v-if="danger.attachmentLocalList.length<9">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
			
			<view class="padding margin-top flex flex-direction">
				<button class="cu-btn lg bg-blue" @tap="clickSubmit">提交</button>
			</view>
		</view>

		<view class="cu-modal" :class="modelVideo.show?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">播放视频</view>
					<view class="action" @tap="clickHideModel">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<view class="" style="margin: 0 10px;">
						<video :src="modelVideo.src" controls style="width: 100%;" :style="{'height':modelVideo.show?'200px':'0px'}"></video>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	let that = null;
	export default {
		data() {
			return {
				modelVideo: {
					show: false,
					src: ''
				},
				danger: {}
			}
		},
		onLoad(options) {
			that = this;
			let danger = JSON.parse(decodeURIComponent(options.danger));
			that.danger = danger;
		},
		methods: {
			/**
			 * 点击选择图片
			 */
			clickChooseImage: function() {
				uni.showActionSheet({
					itemList: ['图片', '视频'],
					success(res) {
						let index = res.tapIndex;
						switch (index) {
							case 0:
								// 选择图片
								uni.chooseImage({
									count: 1,
									sizeType: ['compressed'],
									success(res) {
										let files = res.tempFiles;
										for (let i = 0; i < files.length; i++) {
											let f = files[i];
											let doc = {};
											doc.path = f.path;
											doc.type = 'jpg';
											that.danger.attachmentLocalList.push(doc);
										}
									}
								})
								break;
							case 1:
								// 选择视频
								uni.chooseVideo({
									sourceType: ['camera'],
									success(res) {
										let doc = {
											path: res.tempFilePath,
											type: 'mp4'
										}
										that.danger.attachmentLocalList.push(doc);
									}
								})
								break;
						}
					}
				})
			},

			/**
			 * 点击删除图片、视频的方法
			 * @param {Object} e
			 */
			clickDeleteImage: function(e) {
				uni.showModal({
					title: '提示',
					content: '确定删除此处附件?',
					cancelColor: '#747474',
					cancelText: '取消',
					confirmColor: '#e64340',
					confirmText: '确定',
					success(res) {
						if (res.confirm) {
							let index = e.currentTarget.dataset.index;
							that.danger.attachmentLocalList.splice(index, 1);
						}
					}
				})
			},
			/**
			 * 点击预览图片
			 * @param {Object} e
			 */
			clickPreviewImage: function(e) {
				let index = e.currentTarget.dataset.index;
				let doc = that.danger.attachmentLocalList[index];
				let type = doc.type;
				if (type == 'jpg') {
					uni.previewImage({
						urls: [doc.path]
					})
				} else if (type == 'mp4') {
					// 使用模态框预览视频
					that.modelVideo.show = true;
					that.modelVideo.src = doc.path;
				}
			},
			/**
			 * 点击隐藏视频预览的模态框
			 */
			clickHideModel: function() {
				that.modelVideo.show = false;
				that.modelVideo.src = '';
			},
			/**
			 * 点击提交
			 */
			clickSubmit:function(){
				// 判断是否有隐患
				if(that.danger.contentDesc.trim().length != 0 || that.danger.attachmentLocalList.length!=0){
					// 说明有隐患
					that.danger.hasError = 1;
				}else{
					that.danger.hasError = 0;
				}
				// 通知上个页面更新danger的信息
				uni.$emit('updateDeviceDanger',that.danger);
				// 返回上一页
				uni.navigateBack()
			}


		}
	}
</script>

<style>

</style>
